<!DOCTYPE html>
<html>
<head>
    <title>SSE 测试</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        h1 {
            text-align: center;
        }

        #messages {
            width: 90vw;
            height: 80vh;
            display: flex;
            align-items: flex-end;
            border: 0.2vw solid black;
            margin: 5vw;
        }

        #messages div {
            width: 5vw;
            height: var(--h);
            background-color: green;
        }
    </style>
</head>
<body>
    <h1>内存实时占用情况</h1>
    <div id="messages"></div>
    <script>
        const eventSource = new EventSource('/sse');
        const messagesList = document.querySelector('#messages');

        eventSource.onmessage = (event) => {
            const data = JSON.parse(event.data);
            console.log(data.memoryUsage.usedMem, data.memoryUsage.totalMem, data.memoryUsage.usedMem / data.memoryUsage.totalMem);
            const div = `<div style="--h: ${ data.memoryUsage.usedMem / data.memoryUsage.totalMem * 100 }%;"></div>`;
            if (messagesList.children.length >= 18) {
                messagesList.removeChild(messagesList.children[0]);
            }
            messagesList.innerHTML += div;
        };

        eventSource.onerror = (err) => {
            console.error('SSE 错误:', err);
            eventSource.close();
        };
    </script>
</body>
</html>